<template>
    <view class="subscribe-page">
      <view class="nav-bar">
        <view class="nav-left" @click="navBack">
          <image
            class="nav-icon"
            src="https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-25/1756109453487.png?x-oss-process=image/resize,w_200,h_200"
          />
          <text class="nav-title">消息中心</text>
        </view>
      </view>

      <view class="msg-list">
        <view class="msg-item" v-for="(m, i) in messages" :key="i">
          <image class="msg-icon" src="https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-25/1756110466332.png?x-oss-process=image/resize,w_200,h_200" />
          <view class="msg-content">
            <text class="msg-title">{{ m.title }}</text>
            <text class="msg-time">{{ m.time }}</text>
          </view>
        </view>
      </view>
    </view>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  const navBack = () => uni.navigateBack()
  const messages = ref([
    { title: '感谢您的加入！', time: '2025-03-31 15:17:00' },
    { title: '乐游十周年纪念日来了！', time: '2025-03-30 11:50:19' },
    { title: '年过已过，未来还远吗...', time: '2025-03-28 12:03:42' },
    { title: '囧图集：卡塞罗里怎么样？', time: '2025-03-27 12:03:32' },
    { title: '游戏中常见的蠢队友盘点', time: '2025-03-24 12:00:55' },
    { title: '最“看脸”的游戏技能盘点', time: '2025-03-22 12:04:48' }, 
    { title: '大神：想找个聪明能干的富婆，踏实过日子', time: '2025-03-20 12:03:27' },
    { title: '让你深夜失眠到爆肝的游戏盘点', time: '2025-03-18 12:01:40' },
    { title: '囧图：人群中有一眼就会喜欢上吗？', time: '2025-03-20 12:04:01' },
    { title: '明星玩游戏的那些疯狂事盘点', time: '2025-03-16 12:06:20' }
  ])
  </script>
  
  <style scoped>
  .subscribe-page {
    background: #ffffff;
    min-height: 100vh;
  }
  
  /* 顶部导航 */
  .nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 30rpx;
    background-color: #4caf50;
    height: 80rpx;
  }
  .nav-left { display: flex; align-items: center; }
  .nav-icon { width: 40rpx; height: 40rpx; margin-right: 16rpx; }
  .nav-title { color: #fff; font-size: 32rpx; font-weight: 600; }
  .nav-right-icon { width: 36rpx; height: 36rpx; }

  /* 消息列表 */
  .msg-list { background: #fff; }
  .msg-item {
    display: flex;
    align-items: center;
    padding: 22rpx 26rpx;
    border-bottom: 1px solid #f0f0f0;
  }
  .msg-icon { width: 56rpx; height: 56rpx; margin-right: 20rpx; }
  .msg-content { flex: 1; display: flex; flex-direction: column; }
  .msg-title { font-size: 30rpx; color: #333; margin-bottom: 8rpx; }
  .msg-time { font-size: 22rpx; color: #aaa; }
  .chevron { width: 32rpx; height: 32rpx; }
  
  .nav-bar {
    display: flex;
    align-items: center;
    padding: 20rpx;
    background-color: #4caf50;
    height: 60rpx;
  }
  
  .nav-left {
    display: flex;
    align-items: center;
    color: white;
  }
  
  .nav-icon {
    width: 40rpx;
    height: 40rpx;
    margin-right: 15rpx;
  }
  
  .nav-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #eee;
  }
  
  .nav-search-icon {
    width: 40rpx;
    height: 40rpx;
  }
  </style>
  